import { defaultRoomColor } from './defaultRoomColor'

export const KfStyleSettingMixin = {
    data() {
        return {
            defaultColor: defaultRoomColor
        }
    },
    computed: {
        getBackgroundColor() {
            return (data) => {
                const st = localStorage.getItem('roomStateBackgroundColor')
                let csf
                if (st) {
                    csf = JSON.parse(st)
                } else {
                    csf = Object.assign({}, this.defaultColor)
                }
                let checkBackgroundColor = csf[data]
                if (data === 'VD' || data === 'OD') {
                    let cbc =
                        'repeating-linear-gradient(150deg, '
                        + checkBackgroundColor + ' 2px, '
                        + checkBackgroundColor + ' 1px, '
                        + checkBackgroundColor + ' 10px, black 11px)'
                    // 'repeating-linear-gradient(150deg, #e65926 2px, #e65926 1px, #e65926 10px, black 11px)'
                    return { backgroundImage: cbc }
                } else {
                    return {
                        backgroundColor: checkBackgroundColor
                    }
                }
            }
        },
        getTextColor() {
            return (data) => {
                const st = localStorage.getItem('roomStateBackgroundColor')
                let csf
                if (st) {
                    csf = JSON.parse(st)
                } else {
                    csf = Object.assign({}, this.defaultColor)
                }
                let checkBackgroundColor = csf[data]
                if (data === 'VD' || data === 'OD') {
                    let cbc =
                        'repeating-linear-gradient(150deg, '
                        + checkBackgroundColor + ' 2px, '
                        + checkBackgroundColor + ' 1px, '
                        + checkBackgroundColor + ' 10px, black 11px)'
                    // 'repeating-linear-gradient(150deg, #e65926 2px, #e65926 1px, #e65926 10px, black 11px)'
                    return cbc
                } else {
                    return checkBackgroundColor
                }
            }
        },
        getCssFT() {
            return {
                color: 'black',
                width: '110px',
                height: '80px',
                margin: '3px',
                padding: '0 5px',
                position: 'relative',
                userSelect: 'none',
            }
        },
        getCssExample() {
            return {
                color: 'black',
                fontWeight: 'bold',
                margin: '0 5px',
                height: '40px',
                width: '70px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
            }
        },
        getCssTopRight() {
            return (width, height) => {
                return {
                    width: width,
                    height: height,
                    top: '0',
                    right: '0',
                    border: '1px solid white',
                    position: 'absolute'
                }
            }

        }
    }
}